package app.delish.details

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import app.delish.details.R
import app.delish.compose.ui.AppBarIcon

/**
 * 详情页标题组合组件：显示标题+副标题+选项菜单按钮
 *
 * @param title 主标题文本
 * @param subtitle 副标题文本
 * @param modifier 布局修饰符
 * @param contentPadding 内边距
 * @param onOptionsClicked 选项按钮点击回调
 */
@Composable
fun DetailsTitleCompose(
    title: String,                   // 主标题内容
    subtitle: String,                // 副标题内容
    modifier: Modifier = Modifier,   // 可选修饰符
    contentPadding: PaddingValues = PaddingValues(16.dp), // 内边距（默认为16dp）
    onOptionsClicked: () -> Unit = {} // 选项按钮点击回调
) = Row(
    modifier = modifier.fillMaxWidth() // 占满宽度
) {
    // 屏幕标题区域（包含主标题和副标题）
    ScreenHeader(
        title = title,
        subTitle = subtitle,
        modifier = Modifier
            .fillMaxWidth()        // 占满可用空间
            .padding(end = 8.dp),  // 右侧添加8dp间距（避免与图标重叠）
        contentPadding = contentPadding
    )

    // 选项菜单按钮
    OptionIcon(
        modifier = Modifier
            .align(Alignment.CenterVertically) // 垂直居中
            .padding(
                end = contentPadding.calculateEndPadding(LayoutDirection.Rtl), // 右到左布局适配
                top = contentPadding.calculateTopPadding(),    // 顶部边距
                bottom = contentPadding.calculateBottomPadding() // 底部边距
            ),
        onOptionsClicked = onOptionsClicked
    )
}

/**
 * 选项菜单图标组件
 *
 * @param modifier 布局修饰符
 * @param onOptionsClicked 点击回调函数
 */
@Composable
fun OptionIcon(
    modifier: Modifier,                  // 布局修饰符
    onOptionsClicked: (() -> Unit)? = null  // 可选点击回调
) {
    // 复用应用栏图标组件
    AppBarIcon(
        imageVector = Icons.Filled.MoreVert,  // 使用Material Design的三点垂直图标
        contentDescription = stringResource(R.string.recipe_detail_options),  // 无障碍描述
        modifier = modifier,
        onClicked = onOptionsClicked ?: {}   // 处理空回调情况
    )
}

/**
 * 预览函数：展示详情页标题组合组件的效果
 */
@Preview
@Composable
private fun MonsterTitleWithSubtitlePreview() {
    // 模拟数据显示
    DetailsTitleCompose(
        title = "Classic Beef Lasagna",  // 主标题
        subtitle = "A beloved Italian family favorite"  // 副标题
    ) {
        // 点击事件处理（预览时为空）
    }
}